<template>
  <div class="live-big-card">
    <div v-if="status==1 || status==2" class="pic">
      <a :href="liveUrl" target="_blank">
        <img class="cover" crossorigin="anonymous" :src="liveImg" />
      </a>
      <div v-if="status==1" class="tip">
        <div class="icon">
          <img src="@/assets/icons/living.png" />
        </div>
        <div class="text">直播中</div>
      </div>
    </div>
    <div v-else class="pic">
      <img class="cover" crossorigin="anonymous" :src="liveImg" />
    </div>
    <div class="info">
      <div class="avator">
        <img crossorigin="anonymous" :src="expertPic" />
      </div>
      <div class="expert">讲师：{{expertName}}</div>
      <div class="stats">{{status==0 ? formatLiveTime(startTime) : `观看人数：${viewNum ? viewNum : 0} 人`}}</div>
      <div v-if="status==0" class="operation">直播预告</div>
      <div v-else class="operation">
        <a-button danger shape="round"
          :href="liveUrl"
          target="_blank"
          class="console-btn flex-row flex-center">
          {{status==1 ? "进入直播间" : "看回放"}}
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
import { formatLiveTime } from '@/utils';
import { base58Encode } from '@/utils/base58';

export default {
  name: 'LiveBigCard',
  props: {
    liveId: String,
    liveImg: String,
    liveTitle: String,
    liveUrl: String,
    expertName: String,
    expertPic: String,
    startTime: String,
    viewNum: String,
    status: Number,
  },
  data () {
    return {
    }
  },
  setup (props) {
    const getLiveUrl = () => {
      let data = {
        liveId: props.liveId,
        liveImg: props.liveImg,
        liveTitle: props.liveTitle,
        liveUrl: props.liveUrl,
        expertName: props.expertName,
        expertPic: props.expertPic,
        startTime: props.startTime,
        viewNum: props.viewNum,
        status: props.status,
      }
      return `/#/live/index?id=${base58Encode(JSON.stringify(data))}`;
    }

    return {
      formatLiveTime,
      getLiveUrl,
    }
  },
}
</script>

<style lang="less" scoped>
.live-big-card {
  width: 100%;
  height: 416px;
  background: @white;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.06);
  border-radius: 20px 0px 0px 20px;

  .pic {
    width: 100%;
    height: 336px;
    border-radius: 20px 0 0 0;
    position: relative;

    &.link {
      cursor: pointer;
    }

    .cover {
      width: 100%;
      height: 100%;
      border-radius: 20px 0 0 20px;
    }

    .tip {
      width: 94px;
      height: 32px;
      line-height: 32px;
      padding: 8px 12px;
      font-size: 16px;
      font-weight: 400;
      color: @white;
      background: @font-red;
      opacity: 0.5;
      border-radius: 16px;
      display: flex;
      position: absolute;
      top: 8px;
      left: 8px;

      .icon {
        width: 16px;
        height: 16px;
        line-height: 16px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .text {
        height: 16px;
        line-height: 16px;
        margin-left: 4px;
      }
    }
  }

  .info {
    height: 40px;
    line-height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 20px;

    .avator {
      width: 40px;
      height: 40px;
      cursor: pointer;
      border-radius: 20px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .expert {
      flex: 1;
      height: 16px;
      line-height: 16px;
      font-size: 16px;
      font-weight: 400;
      color: @font-grey-light;
      margin-left: 8px;
    }

    .stats {
      width: 124px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      font-weight: 400;
      color: @font-grey;
      text-align: center;
      margin-left: 12px;
    }

    .operation {
      width: 120px;
      height: 40px;
      line-height: 38px;
      font-size: 16px;
      font-weight: 500;
      color: @font-grey-light;
      text-align: center;
      margin-left: 12px;

      &.red {
        color: @font-red;
        border-radius: 20px;
        border: 1px solid @font-red;
        cursor: pointer;
      }
    }
  }
}
</style>
